<template>
  <a-modal
    width="80%"
    v-model:visible="modalVisible"
    @ok="handleOk"
    @cancel="handleCancel"
  >
    <template #title> 物料产品选择 </template>
    <div class="container">
      <div class="content">
        <a-table
          row-key="id"
          :row-selection="rowSelection"
          v-model:selectedKeys="selectedKeys"
          @select="onSelect"
          :columns="columns"
          :data="data"
          :pagination="false"
        >
          <template #columns>
            <a-table-column :width="80" align="center">
              <template #title> 序号 </template>
              <template #cell="{ rowIndex }">
                {{ rowIndex + 1 }}
              </template>
            </a-table-column>
            <a-table-column
              align="center"
              :width="200"
              title="物料编码"
              data-index="managementNumber"
            >
            </a-table-column>
            <a-table-column
              align="center"
              :width="150"
              title="物料名称"
              data-index="managementName"
            >
            </a-table-column>

            <a-table-column
              align="center"
              :width="150"
              title="规格型号"
              data-index="spec"
            >
            </a-table-column>
            <a-table-column
              data-index="basicName"
              align="center"
              :width="100"
              title="基本单位"
            >
            </a-table-column>
            <a-table-column
              align="center"
              :width="100"
              title="所属分类"
              data-index="materialType"
            >
            </a-table-column>
          </template>
        </a-table>
      </div>
    </div>
  </a-modal>
</template>

<script lang="ts" setup>
  import { reactive, computed, ref, watchEffect, nextTick } from 'vue';
  import { getOutsourcingOne } from '@/api/produce-management/production-operation/index';
  // import { cloneDeep } f rom 'lodash';
  import { useRoute } from 'vue-router';

  const route = useRoute();

  const props = withDefaults(
    defineProps<{
      visible: boolean;
    }>(),
    {
      visible: false,
    }
  );
  const tableRef = ref();
  const emit = defineEmits(['update:visible', 'selectProductEmit']);
  const getRoleTree = ref<any>([]);

  // 选择器配置
  const args = reactive({
    rowSelection: {
      type: 'radio',
    },
  });

  const rowSelection = reactive({
    type: 'radio',
  });
  const selectedKeys = ref();
  const data = ref([]);

  const id = Number(route.query.id);
  const getMaterialData = async () => {
    try {
      const res: any = await getOutsourcingOne({
        id,
      });
      data.value = res.item;
    } catch (err: unknown) {
      console.log(err);
    }
  };
  getMaterialData();
  // 判断用户是否显示弹出框
  const modalVisible = computed({
    get() {
      return props.visible;
    },
    set(visible: boolean) {
      emit('update:visible', visible);
    },
  });

  const SelectDate: any = ref([]);
  const onSelect = (e: number, keys: number, val: any) => {
    SelectDate.value[0] = val;
  };

  // 确定
  const handleOk = async () => {
    emit('selectProductEmit', SelectDate.value);
    SelectDate.value = [];
    selectedKeys.value = [];
    modalVisible.value = false;
  };

  // 取消
  const handleCancel = () => {
    modalVisible.value = false;
  };

  const columns = [
    {
      title: '物料编码',
      code: 'number',
    },
    {
      title: '物料名称',
      code: 'name',
    },
    {
      title: '型号规格',
      code: 'spec',
    },
    {
      title: '物料指导单价',
      code: 'singlePrice',
    },
    {
      title: '基本单位',
      code: 'basicUnitName',
    },
    {
      title: '供应商编号',
      code: 'supplierNumber',
    },
    {
      title: '供应商名称',
      code: 'supplierName',
    },
    {
      title: '供应商级别',
      code: 'supplierLevelName',
    },
    {
      title: '产品认证情况',
      code: 'authState',
    },
    {
      title: '是否有关联采购合同',
      code: 'contract',
    },
  ];

  //   watchEffect(() => {
  //     if (modalVisible.value) {
  //       form.value = props.formList;
  //     }
  //   });
</script>

<style scoped lang="less">
  .demo-basic {
    margin-top: 5px;
    width: 500px;
    // margin: auto;
    background-color: aliceblue;
  }
</style>
